<template>
  <!-- 用户收藏 路由组件 -->
  <div class="mine-collects">
    <!-- 筛选框 -->
    <div class="search-ipt">
      <input type="text" v-model="keyword" />
    </div>
    <!-- 收藏数据 -->
    <div v-show="collects.length" class="mine-collect">
      <div
        class="collect-item"
        v-for="(collect, index) in collectsFilter"
        :key="`${collect}-${index}}`"
      >
        <div class="collect-title">收藏作品{{ collect }}</div>
        <div class="collect-operation" @click="cancelCollectHandler(index)">
          取消收藏
        </div>
      </div>
      <div ref="more" class="more" @click="moreHandler">加载更多</div>
    </div>
    <!-- 空状态 -->
    <div v-show="!collects.length">
      <EmptyTips tips="暂无收藏"></EmptyTips>
    </div>
  </div>
</template>

<script>
import EmptyTips from "@/components/public/EmptyTips";
export default {
  name: "MineCollect",
  components: {
    EmptyTips,
  },
  data() {
    return {
      /* 关键字 */
      keyword: "",
      /* 收藏数据 */
      collects: [
        "收藏作品【1】",
        "收藏作品【2】",
        "收藏作品【3】",
        "收藏作品【4】",
        "收藏作品【1】",
        "收藏作品【2】",
        "收藏作品【3】",
        "收藏作品【4】",
        "收藏作品【1】",
        "收藏作品【2】",
        "收藏作品【3】",
        "收藏作品【4】",
        "收藏作品【1】",
        "收藏作品【2】",
        "收藏作品【3】",
        "收藏作品【4】",
      ],
    };
  },
  computed: {
    /* 过滤收藏数据 */
    collectsFilter() {
      return this.collects.filter((x) => x.indexOf(this.keyword) !== -1);
    },
  },
  methods: {
    /* 取消收藏业务处理 index 当前索引 */
    cancelCollectHandler(index) {
      this.collects.splice(index, 1);
      this.$message("操作成功");
    },
    /* 更多收藏业务处理 */
    moreHandler() {
      /* 隐藏起来 */
      this.$refs["more"]["style"]["display"] = "none";
      /* 模拟加载一下 */
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        target: ".mine-collects",
      });
      /* 帅一下 */
      setTimeout(() => {
        this.$refs["more"].style.display = "block";
        this.collects = [...this.collects, ...this.collects];
        loading.close();
      }, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.mine-collects {
  .more {
    text-align: center;
    cursor: pointer;
  }
  .search-ipt {
    text-align: right;
    padding-right: 0.4rem;
    input {
      outline: none;
      border: 0;
      padding: 0.05rem 0;
      padding-left: 0.1rem;
      background-color: rgba(103, 103, 103, 0.5);
      color: #fff;
    }
  }
  .mine-collect {
    height: 5rem;
    overflow: auto;
    padding-top: 0.1rem;

    .collect-item {
      font-size: 0.2rem;
      display: flex;
      margin-bottom: 0.3rem;
      width: 85%;
      justify-content: space-between;
    }
    .collect-operation {
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 900px) {
  .mine-collect {
    .collect-item {
      width: auto;
    }
  }
  .search-ipt {
    input {
      width: 100%;
    }
  }
}
</style>